Introduction to Web Design - 3. Beginning HTML: Creating a very basic HTML document using a simple text editor.
3.1 Creating Your First HTML Document | 3.2 Headings and Horizontal Ruler Lines
  1. Preface
  2. Markup Languages – A Definition and Some History
  3. Beginning HTML
  4. HTML Lists
  5. HTML Tables
  6. HTML - Color, Fonts and Special Characters
  7. HTML Links
  8. HTML Images
  9. HTML Frames
  10. Cascading Style Sheets
  11. MicroSoft PhotoDraw
  12. JavaScript
  13. HTML Forms and Form Handling
  14. VBScript
  15. MicroSoft FrontPage
  16. Active Server Pages
  17. Java Applets
  18. XML Meaning and More
  19. Macromedia Flash 5.0
  20. References
HTML documents are plain-text (or plain ASCII) documents that consist of both tags and content. There are several WYSIWYG editors for implementing HTML documents, webpages and entire websites. However, it is a good idea to be able to handle basic HTML on your own using a simple text editor such as Notepad.
HTML is primarily a means of describing how parts or elements of a document should appear and how it should "behave". It is implemented through the use of tags. Tags are codes enclosed in angle brackets (<…>). For the most part, tags appear in pairs of opening tags and closing tags. Closing tags generally have the same code as the opening tag preceded by a forward slash. For example, the beginning of a large heading uses the < H1> opening tag and < /H1> closing tag.
HTML documents have two primary sections: the head and the body. The head can contain information that is not displayed in the document such as keywords to be used by search engines. The body is the part of the HTML document that appears in the browser pane.

3.1 Creating Your First HTML Document

To create a very simple HTML document, do the following:
  1. Start Notepad. On most PCs, Notepad can be found by going to the Start menu and choosing Programs/Accessories/Notepad. You can use Microsoft Word or WordPad if you want, but remember to save the file as a text document.
  2. At the very top of the document, type in the beginning tag for any HTML document: 
    <html>
  3. Hit the Enter key a few times and then enter the closing HTML tag: 
    </html>
    1. Note that HTML is not case-sensitive. That is, it doesn't matter if you write your tags in uppercase, lowercase or mixed case. For example, < html > is the same as <HTML> or <HtMl>. However, mixed case is difficult to read. I had previously preferred to use all uppercase for tags, because they are easier to locate that way. But, XHTML (extended HTML) requires that the tags be in lowercase, so you may want to use lowercase for your tags.
    2. Note also that it is a good idea to type in the opening and closing tags at the same time. Getting into that habit can avoid problems that can occur when you forget to insert a closing tag.
  4. Between the opening and closing < html> tags, add tags for the head and body sections of the html document: 
    <head>
</head>
<body>
</body>
  5. In the head section, you can specify a title for the webpage. The title will appear on the very top of the browser window when the page is viewed in a browser. To add a title to this webpage, place the cursor after the opening head tag, hit Enter and add the following:
    <title> My first webpage  </title>

  6. The content of the webpage goes into the body section of the webpage. To add some content to this webpage, position your cursor after the opening body tag, hit Enter and add a large heading and one or two sentences like the following:
    	
<h1> HTML made easy </h1>
This is not as hard as I thought it would be.
I might really like this.


    Your file should now look like this: 

    <html>
<head>
<title>  my first webpage </title>
</head>

<body>
<h1> HTML made easy </h1>
This is not as hard as I thought it would be.
I might really like this.
</body>
</html>
  7. Save the document with the name first.htm . You have now created a complete webpage.
  8. To view the page in Internet Explorer, start Explorer. Go to the File menu and choose Open . In the pop-up window that appears, click on the Browse button and select your first.htm file. To view the page in Netscape, start Netscape. Go to the File menu and choose Open File . In the pop-up window that appears, select your first.htm file.
    1. Notice that the title, "My first webpage", is displayed in the top border of the browser window.
    2. Notice the size and placement of the heading and of the sentences in the body. Notice that even though the two sentences are on two different lines in the file, the second starts on the same line as the first in the browser window. This is because browsers ignore white space (spaces, tabs and newlines). If you want a sentence to start on a new line, you must put a tag in that explicitly places a new line in the webpage. However, the heading tag always includes some white space under the heading text in the browser. That is why the heading and the first sentence do not appear on the same line.
    3. You should also be aware that your file would appear exactly the same in a browser if it looked like this:

      <html><head><title>  my first 
webpage </title></head><body><h1> 
HTML made easy </h1>This is not 
as hard as I thought it would be. I might really 
like this.</body></html>


      However, the previous version is much easier for a person to read, decipher and see what the parts of the page are. It is also much easier to find the opening and closing tags.

3.2 Headings and Horizontal Ruler Lines

  1. Open the first.htm file in Notepad again.
  2. Add more headings of different sizes to see how the six available HTML headings appear. After the line <h1> HTML made easy </h1>, type in the following: 

    <h2> HTML made easier </h2>
<h3> HTML made easiest </h3>
<h4> HTML made most easy </h4>
<h5> HTML made very easy </h5>
<h6> HTML made very very easy </h6>


  3. Add a <br / > tag in between the two sentences after the headings. This tag will cause the second sentence to start on a new line. The closing tag is incorporated with the beginning tag.
  4. After the second sentence, add a ruler line with the following tag that also has no corresponding closing tag: 

    <hr>
  5. Save the file and view it again in a browser.
  6. Open the file again in Notepad. Most HTML tags can have attributes. Attributes are additional information that can affect the appearance of the content between the tags.
    1. Let's add some more ruler lines to the bottom of the file to see the effects of the width, size and noshade attributes for the <hr> tag. Add the following lines to the bottom of your webpage: 

      <hr noshade>
<hr width = 5%  size = 12 noshade>
<hr width = 10% size = 24 noshade >
<hr width = 25% noshade >
<hr width = 50% noshade >
  7. Save the file and view it again in a browser. Your source file should look like this:


    Image of Source File

    In a browser, your file should appear as follows:

    Image of File in Browser

References

  1. Bos, Bert, XML Introduction (accessed August, 2002) http://www.w3.org/XML/1999/XML-in-10-points
  2. Dietel, H. M., Dietel, P. J. & Neito, T. R. (2001) Internet & World Wide Web: How to Program. 2nd Edition. Prentice Hall, NJ.
  3. Flynn, P. XML FAQ (accessed August, 2002) http://www.ucc.ie/xml/#acro
  4. Richmond, A. The Web Developers Virtual Library Introduction to XHTML (accessed August, 2002) http://www.wdvl.com/Authoring/Languages/XML/XHTML/
  5. Veen, J. (2001) The Art and Science of Web Design. New Riders: Indianapolis, IN.
  6. HTML and XHTML Information www.w3c.org/markup

Cynthia J. Martincic
cynthia.martincic@email.stvincent.edu
CIS Department
Saint Vincent College
Latrobe, PA 15650